<template>
	<div class="home-outer-wrapper">
		<image v-if="newUser&&guideList.length!==indexs" :src="guideList[indexs]" class='inImage' mode='widthFix'
			@click="cutGuide"></image>
		<!-- 	<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y list" @scrolltolower="lower"> -->
		<template v-else>
			<div class="nav-wrapper">
				<div class="logo-wrapper" :style="{'padding-top':menuButtonInfo.top+'px'}">
					<image class="logo" :style="{'height':39+'px'}" src="/static/logo-name.png" mode="heightFix">
					</image>
				</div>
				<div class="address-choose" :style="{'top':menuButtonInfo.top+8+'px'}"
					@click="navigateTo('/pages/tabbar/home/address/address')">
					<div class="name" v-if="positionState=='success'">
						{{cityName}}
					</div>
					<div class="name" v-if="positionState=='refuse'">
						哈尔滨
					</div>
					<div class="name" v-if="positionState=='fail'">
						哈尔滨
					</div>
					<div class="name" v-if="positionState=='ing'">
						定位中...
					</div>
					<div class="next">
						<u-icon name="arrow-down" color="#666" size="24"></u-icon>
					</div>
				</div>
				<div class="position-search">
					<div class="search-wrapper" @click="navigateTo('/pages/search/store')">
						<div class="scan-gathering"
							@click.stop="grid('/pages/business/collection-code/collection-code')"
							v-if="login===true&&haveStore == true">
							<span class="text">收<br>款</span>
							<image src="/static/home/icon_qrcode.png" class="gathering" color="#fff" size="60"
								font-size='14px'></image>
						</div>
						<div v-else class="button">
							<icon type="search" size="22" />
						</div>
						<div class="text" style='color: rgba(177, 177, 177, 1);'>零食抢先购</div>
					</div>
					<div class="scan-wrapper">
						<u-icon name="scan" @click="scan()" color="rgba(255, 255, 255, 1)" size="76"
							style='padding-right:5px'>
						</u-icon>
						<span class="text">付<br>款</span>
					</div>
				</div>
				<div class='inform'>
					<u-notice-bar type="none" :duration="3000" bg-color='rgba(234, 63, 37, 1)' volume-size='38'
						color='rgba(255, 255, 255, 1)' font-size='24rpx' mode="vertical" :list="list"></u-notice-bar>
				</div>
			</div>
			<div scroll-y class="content-wrapper">
				<div class="nav-bg" :style="{'height':navBg+'px'}"></div>
				<div class='classify-wrapper'>
					<div class="shop-detail" v-if="categoryList===''">
						<u-loading mode="circle" size="28"></u-loading> 加载中……
					</div>
					<div class="shop-detail" v-else-if="categoryList.length==0">
						暂无分类
					</div>
					<template v-else>
						<view class="t-item" v-for="(item,index) in categoryList" :key="item.id"
							@click="classifyTo(item,index)">
							<image :src="item.image"></image>
							<text>{{item.name}}</text>
						</view>
						<view class="t-item" @click="classifyTo(item,0)">
							<image src="https://rsyl.oss-cn-beijing.aliyuncs.com/4bbf1c8fe7bc42b7be00f46afef1daa8.png">
							</image>
							<text>全部</text>
						</view>
					</template>
				</div>
				<div class="swiper-wrapper">
					<u-swiper @click="clickSwiper" interval="5000" border-radius='0' duration="500" height="386"
						v-if="pageData.carousel" name="img" :list="pageData.carousel.options.list">
						<u-loading slot="loading"></u-loading>
					</u-swiper>
				</div>
				<!-- <div class="vip-wrapper" v-if="vipBoxData.status=='0'&&guideVip" -->
				<div class="vip-wrapper" v-if="vipBoxData.status=='0'"
					:style="{'background-image':`url(${vipBoxData.url})`}"
					@click="navigateTo('/pages/tabbar/user/vip/vip')">
				</div>
				<div class="wrapper-shop">
					<div class='shop-local' v-if="goodsStore.status=='0'">
						<div class="title">
							<!-- <u-icon name="map-fill" color="#ffb509" size="30"></u-icon> -->
							<img v-if="goodsStore.url" :src="goodsStore.url" alt=""
								style="width:30upx;height: 30upx;padding-top: 20px;">
							<text class="name" v-text="goodsStore.name" style="padding-top: 20px;">本地好店</text>
						</div>
						<div class="shop-detail" v-if="localhostGoodStore===''">
							<u-loading mode="circle" size="28"></u-loading> 加载中……
						</div>
						<div class="shop-detail" v-else-if="localhostGoodStore.length==0">
							暂无好店
						</div>
						<swiper v-else :circular="true" :autoplay="true" :interval="5000" :duration="500"
							display-multiple-items='3' :style="{minHeight: storeHeight}">
							<swiper-item class="t-list category-list" v-for="(item,index) in localhostGoodStore "
								:key="index" @click="toStore(item)">
								<view class="t-item category-item">
									<u-image border-radius='8' :src="item.storeLogo" :lazy-load="true">
									</u-image>
									<text class="text">{{item.storeName}}</text>
								</view>
							</swiper-item>
						</swiper>
					</div>
					<div class="shop-top-box">
						<div class="shop-box" :style="{flex:hotGoods.status=='1'?'0 0 100%':'0 0 48%'}"
							@click="navigateTo('/pages/product/hotstuff/hotstuff')" v-if="hotGoods.status=='0'">
							<div class="title">
								<u-image v-if="hotGoods.url" width="35" height="35" :src="hotGoods.url">
								</u-image>
								<text class="name" v-text="hotGoods.name">热销商品</text>
							</div>
							<div class="shop-detail" v-if=" commodityProduct===''">
								<u-loading mode="circle" size="28"></u-loading> 加载中……
							</div>
							<div class="shop-detail" v-else-if="commodityProduct.length==0">
								暂无商品
							</div>
							<swiper v-else :circular="true" :autoplay="true" :interval="5000" :duration="500">
								<swiper-item class="t-list category-list" v-for="(item,index) in commodityProduct "
									:key="index">
									<!--  分类详情 -->
									<view class="t-item">
										<u-image border-radius='8' :src="item[0].small" :lazy-load="true"></u-image>
										<text class="text">{{item[0].goodsName}}</text>
									</view>
									<view class="t-item">
										<u-image border-radius='8' :src="item[1].small" :lazy-load="true"></u-image>
										<text class="text">{{item[1].goodsName}}</text>
									</view>
									<!-- showStatus -->
									<view class="t-item" v-if="hotGoods.status=='1'">
										<u-image border-radius='8' :src="item[2].small" :lazy-load="true"></u-image>
										<text class="text">{{item[2].goodsName}}</text>
									</view>
									<view class="t-item" v-if="hotGoods.status=='1'">
										<u-image border-radius='8' :src="item[3].small" :lazy-load="true"></u-image>
										<text class="text">{{item[3].goodsName}}</text>
									</view>
								</swiper-item>
							</swiper>
						</div>
						<div class="shop-box" :style="{flex:newStoreNewGoods.status=='1'?'0 0 100%':'0 0 48%'}"
							@click="navigateTo('/pages/product/goodstore/goodstore')"
							v-if="newStoreNewGoods.status=='0'">
							<div class="title">
								<u-image v-if="newStoreNewGoods.url" width="35" height="35" :src="newStoreNewGoods.url">
								</u-image>
								<text class="name" v-text="newStoreNewGoods.name">新品新店</text>
							</div>
							<div class="shop-detail" v-if="commodityShop===''">
								<u-loading mode="circle" size="28"></u-loading> 加载中……
							</div>
							<div class="shop-detail" v-else-if="commodityShop.length==0">
								暂无新品新店
							</div>
							<swiper :circular="true" v-else :autoplay="true" :interval="5000" :duration="500">
								<swiper-item class="t-list category-list" v-for="(item,index) in commodityShop "
									:key="index">
									<!--  分类详情 -->
									<view class="t-item">
										<u-image border-radius='8' :src="item[0].image" :lazy-load="true"></u-image>
										<text class="text">{{item[0].title}}</text>
									</view>
									<view class="t-item">
										<u-image border-radius='8' :src="item[1].image" :lazy-load="true"></u-image>
										<text class="text">{{item[1].title}}</text>
									</view>
									<view class="t-item" v-if="newStoreNewGoods.status=='1'">
										<u-image border-radius='8' :src="item[2].image" :lazy-load="true"></u-image>
										<text class="text">{{item[2].title}}</text>
									</view>
									<view class="t-item" v-if="newStoreNewGoods.status=='1'">
										<u-image border-radius='8' :src="item[3].image" :lazy-load="true"></u-image>
										<text class="text">{{item[3].title}}</text>
									</view>
								</swiper-item>
							</swiper>
						</div>
					</div>
					<div class='activity-box' v-if="activeData.status=='0'">
						<div class="activity-title">
							<div class='activityMore'>
								<u-image width="30" :src="activeData.url" height="30"></u-image>
								<text class="name" v-text="activeData.name">活动专区</text>
							</div>
							<div class='activityMore' @click="toActivity">
								<text class='more'>更多</text>
								<u-image width="30" height="30" src="/static/home/icon_right.png"></u-image>
							</div>
						</div>
						<div class="shop-detail" v-if="activityAreaProduce===''">
							<u-loading mode="circle" size="28"></u-loading> 加载中……
						</div>
						<div class="shop-detail" v-else-if="activityAreaProduce.length==0">
							暂无活动
						</div>
						<swiper v-else display-multiple-items='1.5' :autoplay="true" :circular='true' :interval="5000"
							:duration="500">
							<swiper-item class="t-list" v-for="(item,index) in activityAreaProduce" :key="index"
								@click="navigateToStoreDetailPage(item)">
								<u-image border-radius='12' :src="item.posterUrl" :lazy-load="true"></u-image>
							</swiper-item>
						</swiper>
					</div>
					<div class='shop-goods'>
						<div class='bottom-title'>
							<div :class="[estimate ? 'name':'names']" @click="storeGoods(true)">本地商圈</div>
							<div :class="[estimate ? 'names':'name']" @click="storeGoods(false)">百焕商城</div>
						</div>
						<div class='more' @click="toFL">
							<text class='name'>＜＜更多＞＞</text>
						</div>
						<!-- 本地商圈 -->
						<template v-if='estimate'>
							<div class="tip" v-if="localhostShop===''">
								<u-loading mode="circle" size="28"></u-loading> 加载中……
							</div>
							<div class="tip" v-else-if="localhostShop.length==0">
								暂无店铺
							</div>
							<div v-else class="goods-list">
								<div class="goods-item bp" @click="navigateToDetailPage(item)"
									v-for="item,i in localhostShop" :key="i">
									<div class="goods-img">
										<image class="image" :src="item.storeLogo" mode="aspectFill">
										</image>
									</div>
									<div class="goods-desc">
										<div class="goods-title">
											{{ item.storeName||'' }}
										</div>
										<div class='site'>
											{{item.storeAddressPath}}{{ item.storeAddressDetail}}
										</div>
										<div class='distance'>
											<u-icon name="map-fill" color="rgba(36, 36, 36, 1)" size="28"></u-icon>
											<span>{{item.distance<1000 ? `${item.distance}m`: `${Number(item.distance/1000).toFixed(2)}km` }}</span>
										</div>
										<div class='evaluate'>
											<span class='grade' style='font-size: 32rpx;'>{{item.score || 0.0}}分</span>
											<span class='sales'>
												月售 {{item.monthSales || 0}}+
											</span>
										</div>
									</div>
								</div>
							</div>
							<uni-load-more v-if="isBottom" class='base' :content-text="contentText"
								:status="loadStatus">
							</uni-load-more>
						</template>
						<!-- 实物商品 -->
						<template v-else>
							<div class="tip" v-if="localhostShop===''">
								<u-loading mode="circle" size="28"></u-loading> 加载中……
							</div>
							<div class="tip" v-else-if="localhostShop.length==0">
								暂无商品
							</div>
							<div v-else class="goods-list">
								<div class="goods-item bp" @click="navigateToDetailPage(item)"
									v-for="item,i in localhostShop" :key="i">
									<div class="goods-img">
										<image class="image" :src="item.thumbnail" mode="aspectFill">
										</image>
									</div>
									<div class="goods-desc">
										<div class="goods-title">
											{{ item.goodsName||'' }}
										</div>
										<div class='evaluate'>
											<span class='grade'>{{item.score||0.0}}分</span>
											<span class='sales'>
												月售 {{item.monthSales ||0}}+
											</span>
										</div>
										<div class="goods-bottom">
											<div class="goods-price">
												<text class="hb-money"></text>
												<text class="hb-money text-limit2">
													{{ item.price | unitPrice }}
												</text>
											</div>
										</div>
									</div>
								</div>
							</div>
							<uni-load-more v-if="isBottom" class='base' :content-text="contentText"
								:status="loadStatus">
							</uni-load-more>
						</template>
					</div>
				</div>
			</div>
		</template>
	</div>
</template>
<script>
	import {
		getFloorData,
		GetClassify,
		GetRollNews,
		GetGoodStore,
		GetHotGoods,
		GetActivity,
		GetNewProduct,
		GetTrapeze,
		GetGoodShopPage,
		GetGoodPage,
		homepage
	} from "@/api/home" //获取楼层装修接口
	import {
		StoreInfo,
	} from '@/api/business.js'
	import {
		getPictureList
	} from "@/api/article";
	import {
		modelNavigateTo
	} from "./template/tpl.js"
	import storage from "@/utils/storage.js"
	import amap from '../../../utils/amap-wx.130.js'
	import config from '@/config/config.js'
	import {
		GetStoreInfoState,
		GetStoreInfo,
	} from "@/api/members.js"

	export default {
		data() {
			return {
				indexs: 0,
				contentText: {
					contentnomore: '我是有底线的~',
				},
				activityAreaProduce: "", //活动专区
				estimate: true, //判断是本地商圈/实物商品
				list: [], //通知数据
				categoryList: '', //分类
				localhostGoodStore: '', //本地好店
				login: false,
				haveStore: false,
				store: '', // 店铺基本信息
				triggered: false, // 下拉刷新
				menuButtonInfo: {}, // 胶囊的定位
				amapPlugin: null,
				positionState: 'ing', //refruse拒绝  ing定位获取中  success定位 fail失败
				cityName: '',
				navBg: '', // 动态计算头部固定的高度
				contentHeight: '',
				guideVip: false, // 是否显示引导用户升级会员
				pageData: '', // 首页数据
				commodityProduct: '', //热销商品
				commodityShop: '', //新店新品
				localhostShop: '', //本地商圈
				// localhostProduce: '', //实物商品
				// 会员折扣等级
				viprate: '',
				pageNum: 1,
				pageSize: 10,
				isBottom: false, //判断是否到底部
				vipBoxData: {}, //是否开通会员
				goodsStore: {}, //本地好店
				hotGoods: {}, //热销商品
				newStoreNewGoods: {}, //新店新品
				activeData: {}, //活动专区
				storeHeight: '120px',
				newUser: false, //是否是新用户
				guideList: [], //引导页
			}
		},
		onLoad(option) {

			this.getInform() //获取通知消息
			this.getClassifyClick() //获取分类
			this.homepage() //首页开通会员等四个模块是否展示
			if (this.cityName == '') {
				this.positionState = 'refuse'
			}
			// 胶囊体 位置大小信息
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			// 定位高度
			this.navBg = this.menuButtonInfo.height + this.menuButtonInfo.top + 12 + 54
			this.contentHeight = uni.getSystemInfoSync().windowHeight - this.navBg
			// 高德地图初始化
			this.amapPlugin = new amap.AMapWX({
				key: config.aMapKey
			})
			// 登录状态
			this.LOGIN = storage.getHasLogin()
			// 定位信息
			this.adcode = storage.getMapCode()
			// 推广
			if (option.scene) {
				storage.setTgCode(option.scene)
			}
			// 通知
			setInterval(() => {
				this.getClassifyClick()
			}, 900000)
			// 初始化数据
			this.initData()
			this.getGoodShopPage()

			wx.showShareMenu({
				withShareTicket: true,
				menus: ["shareAppMessage", "shareTimeline"]
			})
			let that = this;
			uni.getSystemInfo({
				success(res) {
					let Hheight = res.windowHeight
					if (Hheight > 619) {
						that.storeHeight = '200px'
					} else {
						that.storeHeight = '120px'
					}
				}
			})
		},
		onReachBottom: function() {
			this.pageNum++
			this.getGoodShopPage()
		},
		// 分享到微信好友
		async onShareAppMessage(res) {
			let that = this
			if (res.from === 'menu') {
				return {
					title: '百焕商圈',
					path: '/pages/tabbar/home/index',
					// imageUrl: imageUrl
				}
			}
		},
		// 分享到朋友圈
		async onShareTimeline() {
			return {
				title: '百焕商圈',
				path: '/pages/tabbar/home/index',
				// imageUrl: 'https://cdn.uviewui.com/uview/swiper/1.jpg'
			}
		},
		mounted() {
			this.initData()
		},
		onShow() {
			this.initStore() //初始化店铺基本信息
			// this.pageNum = 1
			if (this.cityName == '') {
				this.cityName = '哈尔滨'
			}
			// 登录状态
			let login = storage.getHasLogin()
			/*
			 * 判断登录
			 * true
			 * 汇率，用户信息
			 * 判断时候要引导用户升级vip以及用户是否是最高级别会员
			 * true  false
			 * 引导用户升级
			 * */
			if (login) {

				// 获取汇率
				this.viprate = storage.getVipRate()
				// 获取用户个人信息
				this.userinfo = storage.getUserInfo()

				this.newUser = storage.getNewUser()
				if (this.newUser) {
					storage.setNewUser(false);
					uni.hideTabBar()
					getPictureList({
						code: 'guide'
					}).then(res => {
						console.log("引导页", res)
						this.guideList = res.data.result[0].content == '' ? [] : res.data.result[0].content?.split(
							',') || []
					})
				}
				if (this.userinfo.gradeName + '' != '2') {
					this.guideVip = true
				}
				if (storage.getGuideVip()) {

				} else {
					if (this.userinfo.gradeName + '' != '2') {
						this.guideVip = true
						this.guideToVipState = true
					}
					storage.setGuideVip(true)
				}
			}
			// 地区选择
			let adcode = storage.getMapCode()
			if (login !== this.LOGIN) {
				this.LOGIN = login
				this.initData()
			}
			// 地区更改了 刷新数据
			if (!!adcode.adCode && JSON.stringify(adcode) !== JSON.stringify(this.adcode)) {
				this.positionState = 'success'
				this.cityName = adcode.consigneeAddressPath[adcode.consigneeAddressPath.length - 1]
				this.adcode = adcode
				this.pageNum = 1
				this.initData()
				this.getGoodShopPage()
			}
			/**
			 * 判断时候有地区选择？去申请权限：显示地区
			 * */
			if (!adcode.adCode) {
				this.getAuthorizeInfo()
			} else {
				this.positionState = 'success'
				this.cityName = adcode.consigneeAddressPath[adcode.consigneeAddressPath.length - 1]
				this.adcode = adcode
			}
		},

		methods: {
			//切换引导页
			cutGuide() {
				this.indexs++
				if (this.newUser && this.guideList.length == this.indexs) {
					storage.setNewUser(false);
					this.newUser = false
					uni.showTabBar()
				}
			},
			homepage() {
				homepage().then((res) => {
					if (res.data.code === 200) {
						// let res=res.data.result
						// 开通会员
						this.vipBoxData = res.data.result[0]
						// 本地好店
						this.goodsStore = res.data.result[1]
						// 热销商品
						this.hotGoods = res.data.result[2]
						// 新店新品
						this.newStoreNewGoods = res.data.result[3]
						// 活动专区
						this.activeData = res.data.result[4]
					}
				})
			},
			getGoodShopPage() {
				if (this.estimate) {
					// 本地商圈
					GetGoodShopPage({
						pageSize: this.pageSize,
						pageNumber: this.pageNum,
						state: 1,
					}).then((res) => {
						if (res.data && res.data.success) {
							// 如果是第一页，清空数组，重新赋值
							if (this.pageNum === 1) {
								this.localhostShop = res.data.result.records
							} else { //其他为上拉加载更多，合并数组
								if (this.pageNum !== this.localhostShop.length / 10) {
									this.localhostShop = this.localhostShop.concat(res.data.result.records)
								}
							}
							// 如果数据不够9条 不在加载
							if (res.data.result.records.length <= 9) {
								if (this.localhostShop.length != 0) {
									this.isBottom = true
								}
							}
						} else {
							this.localhostShop = []
						}

					})
				} else {
					// 实物商品
					GetGoodPage({
						pageSize: this.pageSize,
						pageNumber: this.pageNum,
						marketEnable: "UPPER",
					}).then((res) => {
						if (res.data && res.data.success) {
							// 如果是第一页，清空数组，重新赋值
							if (this.pageNum === 1) {
								this.localhostShop = res.data.result.records
							} else { //其他为上拉加载更多，合并数组
								if (this.pageNum !== this.localhostShop.length / 10) {
									this.localhostShop = this.localhostShop.concat(res.data.result.records)
								}
							}
							// 如果数据不够9条 不在加载
							if (res.data.result.records.length <= 9) {
								if (this.localhostShop.length != 0) {
									this.isBottom = true
								}
							}
						} else {
							this.localhostShop = []
						}
					})
				}

			},
			//判断本地商圈/实物商品
			storeGoods(estimate) {
				this.estimate = estimate
				this.pageNum = 1
				this.pageSize = 10
				this.isBottom = false
				this.getGoodShopPage()

			},
			//获取通知
			getInform() {
				GetRollNews().then((res) => {
					if (res.data.code === 200) {
						this.list = res.data.result.map(item => {
							return item.content
						})
					}
				})
			},
			//获取分类
			getClassifyClick() {
				GetClassify().then((res) => {
					if (res.statusCode !== 500) {
						this.categoryList = res.data
					} else {
						this.categoryList = []
					}
				})
			},
			//分类跳转
			classifyTo(item, index) {
				uni.navigateTo({
					url: `/pages/search/category?one=0&two=${index}`,
				})
			},
			initStore() {
				StoreInfo().then((res) => {
					this.store = res.data.result
				})
			},
			//轮播图
			clickSwiper(index) {
				modelNavigateTo(this.pageData.carousel.options.list[index])
			},
			initData() {
				// 初始化数据
				this._freshing = false
				this.pageData = '' // 首页数据
				this.localhostGoodStore = '' //本地好店
				this.commodityProduct = '' //热销商品
				this.commodityShop = '' //新店新品
				this.activityAreaProduce = '' //活动专区
				this.login = this.$options.filters.isLogin("auth")
				this.haveStore = storage.getUserInfo().haveStore
				// 顶部swiper
				getFloorData().then((res) => {
					if (res.data.success) {
						let data = JSON.parse(res.data.result.pageData).list
						let pageData = {}
						for (let i = 0; i < data.length; i++) {
							pageData[data[i].type] = data[i]
						}
						this.pageData = pageData

					}
				})
				//本地好店
				GetGoodStore({
					pageSize: this.pageSize,
					pageNumber: this.pageNum,
					recommend: true,
				}).then((res) => {
					if (res.data && res.data.success) {
						this.localhostGoodStore = res.data.result
					} else {
						this.localhostGoodStore = []
					}
				})
				//新品新店
				GetNewProduct({
					pageSize: this.pageSize,
					pageNumber: this.pageNum,
					marketEnable: "UPPER",
				}).then((res) => {
					if (res.data && res.data.success) {
						let imagelist = []
						let paramsImage = []
						let showStatus = 2
						if (this.hotGoods.status == '1') {
							showStatus = 4
						} else {
							showStatus = 2
						}
						for (let i = 0; i < res.data.result.records.length; i++) {
							paramsImage.push(res.data.result.records[i])
							if (paramsImage.length == showStatus) {
								imagelist.push(paramsImage)
								paramsImage = []
							}
						}
						if (paramsImage.length != 0) {
							imagelist.push(paramsImage)
							paramsImage = []
						}
						this.commodityShop = imagelist
					} else {
						this.commodityShop = []
					}
				})
				//热销商品
				GetHotGoods({
					pageSize: this.pageSize,
					pageNumber: this.pageNum,
					marketEnable: "UPPER",
				}).then((res) => {
					if (res.data && res.data.success) {
						let imagelist = []
						let paramsImage = []
						let showStatus = 2
						if (this.newStoreNewGoods.status == '1') {
							showStatus = 4
						} else {
							showStatus = 2
						}
						for (let i = 0; i < res.data.result.records.length; i++) {
							paramsImage.push(res.data.result.records[i])

							if (paramsImage.length == showStatus) {
								imagelist.push(paramsImage)
								paramsImage = []
							}
						}
						if (paramsImage.length != 0) {
							imagelist.push(paramsImage)
							paramsImage = []
						}
						this.commodityProduct = imagelist
					} else {
						this.commodityProduct = []
					}
				})
				//活动专区
				GetActivity({
					pageSize: 3,
					pageNumber: this.pageNum,
				}).then((res) => {
					if (res.data && res.data.success) {
						this.activityAreaProduce = res.data.result.records
					} else {
						this.activityAreaProduce = []
					}
				})

				setTimeout(() => {
					uni.stopPullDownRefresh()
				}, 1000)
			},
			// 去升级会员
			upgradeVip(grade) {
				uni.showTabBar({

				})
				this.guideToVipState = false
				uni.navigateTo({
					url: "/pages/tabbar/user/vip/vip"
				})
			},
			// 关闭弹窗
			guideToVipClose() {
				uni.showTabBar({

				})
			},
			// 跳转路由
			navigateTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			// 店铺、商品详情
			navigateToDetailPage(item) {
				if (this.estimate) {
					uni.navigateTo({
						url: `/pages/product/shopPage?id=${item.id}`,
					})
				} else {
					uni.navigateTo({
						url: `/pages/product/goods?id=${item.skuList[0].id}&goodsId=${item.id}`,
					})
				}
			},
			toStore(item) {
				uni.navigateTo({
					url: `/pages/product/shopPage?id=${item.id}`,
				})
			},
			// 好店推荐列表
			goShopList() {
				uni.navigateTo({
					url: `/pages/product/goodstore/goodstore`,
				})
			},
			// 跳转地址
			navigateToStoreDetailPage(item) {
				console.log('跳转数据', item)
				if (item.activityType == '0') {
					uni.navigateTo({
						url: `/pages/product/activitys/activitys?id=${item.id}`,
					})
				} else {
					uni.navigateTo({
						url: `/pages/product/activePage?id=${item.id}`,
					})
				}
			},
			//去活动
			toActivity() {
				uni.navigateTo({
					url: '/pages/product/activityArea/activityArea',
				})
			},
			// 去分类
			toFL() {
				if (this.estimate) {
					uni.navigateTo({
						url: '/pages/more/localBusiness/localBusiness',
					})
				} else {
					uni.switchTab({
						url: '/pages/more/physicalGoods/physicalGoods',
					})
				}

			},
			/**
			 * 唤醒客户端扫码
			 * 没权限去申请权限，有权限获取扫码功能
			 */
			scan() {
				if (!this.$options.filters.isLogin("auth")) {
					this.$options.filters.forceLogin()
					return
				}
				let UserInfo = this.$options.filters.isLogin()
				let that = this
				uni.scanCode({
					success: (res) => {
						let shopId = res.result
						uni.setStorageSync('shopId', res.result)
						if (shopId === UserInfo.storeId) {
							uni.showToast({
								title: "不支持向自己付款",
								icon: "none",
							})
							return
						}
						GetStoreInfoState(shopId).then((resinfo) => {
							let result = resinfo.data.result
							if(!result){
								uni.showToast({
									title:"店铺关闭/注销",
									icon:"none"
								})
								return
							}
							uni.setStorageSync('storeName', resinfo.data.result.storeName)
							uni.setStorageSync('storeLogo', resinfo.data.result.storeLogo)
							if (result) {
								uni.navigateTo({
									url: `/pages/tabbar/home/pay/pay?name=${result.storeName}&photo=${result.storeLogo}&id=${shopId}`
								})
							} else {
								uni.showToast({
									title: "请扫描正确的商家收款码",
									icon: "none",
								})
							}
						})
					},
					fail() {
						uni.showToast({
							title: "扫码失败",
							icon: "none",
						})
					}
				})
			},

			/**
			 * 收款码
			 * 没权限去申请权限，有权限获取扫码功能
			 */
			grid(url) {
				if (!this.$options.filters.isLogin("auth")) {
					this.$options.filters.forceLogin()
					return
				}
				uni.navigateTo({
					url: url + '?id=' + this.store.id + '&name=' + this.store.storeName
				})
			},

			getAuthorizeInfo() {
				const that = this
				that.positionState = 'ing'
				uni.authorize({
					scope: 'scope.userLocation',
					success() { // 允许授权
						that.getRegeo()
					},
					fail() { // 拒绝授权
						that.openConfirm()

					}
				})
			},
			// 再次获取授权
			// 当用户第一次拒绝后再次请求授权
			openConfirm() {
				const that = this
				uni.showModal({
					title: '请求授权当前位置',
					content: '需要获取您的地理位置，请确认授权',
					success: (res) => {
						if (res.confirm) {
							uni.openSetting() // 打开地图权限设置
						} else if (res.cancel) {
							that.positionState = 'refuse'
							GetTrapeze().then((res) => {
								if (res.data && res.data.success) {
									storage.setMapCode({
										adCode: res.data.result.adCode,
										consigneeAddressPath: res.data.result
											.consigneeAddressPath,
										trapeze: res.data.result.trapeze
									})
									this.initData()
									this.getGoodShopPage()
								}
							})
							uni.showToast({
								title: '你拒绝了授权，无法获得周边信息',
								icon: 'none',
								duration: 1000
							})

						}
					}
				})
			},
			getRegeo() {
				const that = this
				this.amapPlugin.getRegeo({
					success: (data) => {
						that.positionState = 'success'
						var position = data[0].regeocodeData.addressComponent
						var position = data[0].regeocodeData.addressComponent
						storage.setAdCode({
							consigneeAddressPath: [position.province, position.city, position
								.district
							],
							adCode: position.adcode,
							trapeze: [data[0].longitude, data[0].latitude].join(',')
						})
						storage.setMapCode({
							consigneeAddressPath: [position.province, position.city, position
								.district
							],
							adCode: position.adcode,
							trapeze: [data[0].longitude, data[0].latitude].join(',')
						})
						this.adcode = storage.getAdCode()
						this.cityName = position.district
						this.initData()
						this.getGoodShopPage()
					},
					fail: () => {
						that.positionState = 'fail'
						GetTrapeze().then((res) => {
							if (res.data && res.data.success) {
								storage.setMapCode({
									adCode: res.data.result.adCode,
									consigneeAddressPath: res.data.result
										.consigneeAddressPath,
									trapeze: res.data.result.trapeze
								})
								that.initData()
								that.getGoodShopPage()
							}
						})
						uni.showToast({
							title: '定位获取失败',
							icon: 'none',
							duration: 1000
						})
					}
				})
			},
			onPullDownRefresh() {
				this.initData()
			}
		},
	};
</script>

<style lang="scss" scoped>
	page {
		height: 100%
	}

	.inImage {
		z-index: 10000000;
		// display:flex;
		height: 100%;
		width: 100%;
		// justify-content: center;
		// align-items:center;
	}

	.home-outer-wrapper {
		// background: linear-gradient(to bottom, #ff2400 0%, #ff2400 20%, #ffbeb4 100%);
		background-color: rgba(240, 243, 248, 1);
		box-sizing: border-box;
		display: flex;
		flex-direction: column;

		.nav-wrapper {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 999;
			background-color: #fff;

			.logo-wrapper {
				text-align: center;

				.logo {
					// margin: 0 auto;
					vertical-align: middle;
				}
			}

			.address-choose {
				position: absolute;
				top: 60upx;
				left: 32upx;
				display: flex;

				.name {
					flex: 0 0 120upx;
					width: 120upx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					text-align: center;
					text-shadow: 0 0 2upx 2upx #fff;
				}

				.next {
					text-align: right;
				}
			}

			.position-search {
				margin-top: 18upx;
				padding: 0 24upx;
				display: flex;
				align-items: center;
				height: 54px;
				line-height: 54px;
				background-color: rgba(234, 63, 37, 1);

				.search-wrapper {
					flex: 1;
					display: flex;
					background-color: rgba(255, 255, 255, 0.8);
					box-sizing: border-box;
					height: 38px;
					line-height: 38px;
					align-items: center;
					border-radius: 34rpx;

					.scan-gathering {
						text-align: center;
						display: flex;
						justify-content: center;

						.gathering {
							width: 64upx;
							height: 64upx;
							margin-right: 20upx;
						}

						/deep/.uicon-scan.data-v-6e20bb40:before {
							font-size: 60upx;
						}

						.text {
							color: rgba(0, 0, 0, 1);
							font-size: 26upx;
							height: 32upx;
							line-height: 32upx;
							padding-left: 20upx;
						}
					}

					.button {
						flex: 0 0 100upx;
						width: 120upx;
						text-align: center;
						color: #fff;
						line-height: 3upx;
						font-size: 24upx;
					}
				}

				.scan-wrapper {
					width: 50px;
					flex: 0 0 80upx;
					margin-left: 18upx;
					text-align: center;
					display: flex;
					align-items: center;
					justify-content: center;

					/deep/.uicon-scan.data-v-6e20bb40:before {
						font-size: 60upx;
					}

					.text {
						color: rgba(255, 255, 255, 1);
						height: 38px;
						line-height: 19px;
					}
				}
			}
		}

		.content-wrapper {
			margin-top: 35px;
			padding-bottom: 40upx;
			box-sizing: border-box;
			flex: 1;
			overflow-y: auto;


			//顶部分类
			.classify-wrapper {
				display: flex;
				align-content: flex-start;
				flex-flow: row wrap;
				width: 100%;
				padding: 38rpx 0;
				background-color: rgba(255, 255, 255, 1);
				margin-bottom: 8px;

				.shop-detail {
					margin-left: 302rpx;
					height: 120upx;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.t-item {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					flex: 0 0 20%;
					width: 108rpx;
					font-size: 24rpx;
					padding-bottom: 20rpx;

					image {
						width: 74rpx;
						height: 74rpx;
					}
				}
			}

			.swiper-wrapper {
				width: 750upx;
			}

			.vip-wrapper {
				width: 750upx;
				margin: 24upx auto 0;
				display: flex;
				height: 177upx;
				padding: 24upx 16upx;
				align-items: center;
				border-radius: 16rpx;
				background-image: url('https://rsyl.oss-cn-beijing.aliyuncs.com/950f9e1162014ef297f4f901cf8bb3ed.png');
				background-size: 100% 100%;
			}

			.wrapper-shop {

				//本地好店
				.shop-local {
					height: auto;
					background-color: rgba(255, 255, 255, 1);
					padding-left: 22upx;
					margin-top: 20upx;

					.shop-detail {
						// margin-top: 90upx;
						height: 120upx;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.title {
						display: flex;
						font-size: 32upx;
						font-weight: bold;
						color: rgba(36, 36, 36, 1);
						margin-top: 28upx;

						.name {
							margin-left: 12upx;
						}
					}

					.t-list {
						display: flex;
					}

					.t-item {
						display: flex;
						justify-content: center;
						align-items: center;
						flex-direction: column;
						margin-right: 20rpx;
						margin-top: 18upx;

						/deep/ .u-image {
							width: 220rpx !important;
							height: 220rpx !important;
							margin-bottom: 8upx !important;
						}

						.text {
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							font-size: 24rpx;
							padding-bottom: 10upx;
						}
					}
				}

				//热销商品/新品新店
				.shop-top-box {
					display: flex;
					justify-content: space-between;

					.shop-box {
						flex: 0 0 48%;
						width: 100%;
						height: 100%;
						margin-top: 24upx;
						padding: 24upx 24upx 24rpx;
						background-color: #ffffff;

						.title {
							display: flex;
							font-size: 32upx;
							font-weight: bold;
							color: rgba(36, 36, 36, 1);

							.name {
								margin-left: 13upx;
							}
						}

						.t-list {
							display: flex;
							align-items: center;
							justify-content: space-between;
						}

						.t-item {
							display: flex;
							justify-content: center;
							align-items: center;
							flex-direction: column;
							margin-right: 10rpx;
							margin-left: 10rpx;

							/deep/ .u-image {
								width: 130rpx !important;
								height: 130rpx !important;
								margin-bottom: 8upx !important;
							}

							.text {
								overflow: hidden; //超出部分隐藏
								text-overflow: ellipsis; //超出部分显示...
								display: -webkit-box;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
								font-size: 24rpx;
							}
						}

						.shop-detail {
							margin-top: 24upx;
							height: 120upx;
							display: flex;
							align-items: center;
							justify-content: center;

							.goods-img {
								display: flex;
								align-items: center;
								justify-content: center;

								.image {
									flex: 0 0 48%;
									height: 120upx;
								}
							}
						}
					}
				}

				//活动专区
				.activity-box {
					height: 340rpx;
					margin-top: 24upx;
					padding: 24upx 24upx 24upx;
					background-color: #ffffff;

					.activity-title {
						display: flex;
						justify-content: space-between;
						margin-bottom: 37upx;

						.activityMore {
							display: flex;
							font-size: 26upx;
							font-weight: bold;
							color: rgba(36, 36, 36, 1);

							.name {
								margin-left: 13upx;
							}

							.more {
								margin-right: 11upx;
							}
						}
					}

					.shop-detail {
						margin-top: 24upx;
						height: 120upx;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.t-list {
						/deep/ .u-image {
							width: 440rpx !important;
							height: 200rpx !important;
						}
					}
				}

				//本地商圈/实物商品
				.shop-goods {
					width: 100%;
					padding-top: 45upx;
					position: relative;

					.bottom-title {
						display: flex;
						justify-content: space-around;
						margin-bottom: 48upx;

						.name {
							border-radius: 16upx;
							width: 336upx;
							height: 84upx;
							font-size: 30upx;
							color: rgba(255, 255, 255, 1);
							background-image: url('/static/home/ben.png');
							background-repeat: no-repeat;
							background-size: 100% 100%;
							text-align: center;
							line-height: 83upx;
							font-weight: bold;
						}

						.names {
							border-radius: 16upx;
							width: 336upx;
							height: 84upx;
							font-size: 30upx;
							color: #f27257;
							background-repeat: no-repeat;
							background-size: 100% 100%;
							border: 1px solid #f27257;
							text-align: center;
							line-height: 83upx;
							font-weight: bold;
						}
					}

					.more {
						display: flex;
						justify-content: center;
						font-size: 24upx;
						font-weight: bold;
					}

					.tip {
						text-align: center;
					}

					.goods-list {
						display: flex;
						justify-content: flex-start;
						flex-flow: row wrap;
						padding: 0 10upx;
						width: 100%;

						.goods-item {
							position: relative;
							display: flex;
							justify-content: center;
							align-items: center;
							flex-direction: column;
							margin-top: 36upx;
							margin-left: 13upx;
							width: 346upx;
							padding-bottom: 16upx;
							// height: 524upx;
							background: rgba(255, 255, 255, 1);
							border-radius: 16upx;

							.goods-img {
								.image {
									width: 346upx;
									height: 346upx;
									border-radius: 16rpx 16rpx 0rpx 0rpx;
								}
							}

							.base {
								display: flex;
								justify-content: center;
								width: 100%;
							}

							.goods-desc {
								width: 318upx;
								height: 148upx;

								.goods-title {
									margin: 5upx 0 8upx 0;
									font-size: 26upx;
									font-weight: bold;
									width: 100%;
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
								}

								.evaluate {
									display: flex;
									justify-content: space-between;
									align-items: center;
									color: rgba(255, 137, 33, 1);

									.grade {
										font-size: 26upx;
									}

									.sales {
										font-size: 20upx;
										color: rgba(173, 170, 170, 1);
									}
								}

								.goods-price {
									font-size: 32rpx;
									margin-top: 15upx;
								}

								.site {
									font-size: 20rpx;
									color: rgba(173, 170, 170, 1);
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
									margin-bottom: 8upx;
								}

								.distance {
									display: flex;
									justify-content: flex-end;
									font-size: 20upx;
									color: rgba(23, 23, 23, 1);
								}
							}
						}
					}
				}
			}
		}
	}
</style>
